<template>
	<view class="box">
		<!-- <u-swiper :list="list1" height="600px"></u-swiper> -->
		<view class="card">
			<view class="title">
				租借商品｜免押
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in lease_order_goods" :key="index">
					<view class="item1">
						<view>
							<image :src="item.image" style="width: 80rpx;height: 80rpx;" mode="widthFix">
							</image>
						</view>
						<view class="">
							<view class="" style="font-size: 24rpx;">
								{{item.goods_name}}
							</view>
							<view style="font-weight: 700;margin-top: 10rpx;">
								押金减免
							</view>
						</view>
					</view>
					<view class="" style="display: none;">
						¥{{item.total_rent}}
					</view>
					<view>
						{{item.deposit}}
					</view>
				</view>

				<view class="info">
					<view class="info-item">
						<view class="info-title">
							押金单号
						</view>
						<view class="info-desc">
							{{order_sn}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-title">
							押金说明
						</view>
						<view class="info-desc">
							服务结束后商家将自动扣除产生的租借及其他费用
						</view>
					</view>
					<view class="info-item">
						<view class="info-title">
							开通规则
						</view>
						<view class="info-desc">
							信用分达到550以上可享受
						</view>
					</view>
					<view class="info-item">
						<view class="info-title">
							服务说明
						</view>
						<view class="info-desc">
							租凭物品时免预付费，减少资金占用，租凭更快更便捷
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 30rpx;">
			<u-checkbox-group>
				<u-checkbox v-model="isAgreeProtocol" shape="circle">
					<view class="sm row">
						<view class="lighter">已阅读并签名同意协议</view>
						<view class="primary" @tap.stop="xieyi">《租赁合同协议》</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="btn" @click="submit">
			免押租借
		</view>
	</view>
</template>

<script>
	import {
		xinyongpdf,
		getLeaseOrderDetail
	} from '@/api/lease'
	import {
		prepay,
	} from '@/api/app';
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	export default {
		data() {
			return {
				isAgreeProtocol: false,
				value: false,
				list1: [
					"https://uviewui.com/swiper/swiper1.png",
					"https://uviewui.com/swiper/swiper2.png",
					"https://uviewui.com/swiper/swiper3.png",
				],
				lease_order_goods: [],
				order_sn: '',
				id: 0,
				is_sign: false,
				
				from:""
			};
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			getLeaseOrderDetail({
				id: this.id
			}).then(res => {
				console.log('res', res);
				this.lease_order_goods = res.data.lease_order_goods;
				this.order_sn = res.data.order_sn;
				this.from = res.data.from
				if (res.data.contract_status == 2) {
					this.is_sign = true;
				}
			})
		},
		methods: {
			submit() {
				let vm = this;
				if (!this.is_sign) {
					uni.showModal({
						title: '温馨提示',
						content: '合同协议未签名，去查看',
						showCancel: false,
						success(e) {
							if (e.confirm) {
								uni.navigateTo({
									url: '/pages/xieyi?id=' + vm.id
								})
							}
						}
					})
				} else {
					prepay({
						from: this.from,
						order_id: vm.id,
						// #ifdef MP-WEIXIN
						order_source: 1,
						// #endif
					}).then(({
						code,
						data
					}) => {
						
						switch (code) {
							// 微信支付
							case 1:
								this.payWeChat(data, vm.id);
								break;
								// 支付宝支付
							case 20001:
								this.payAliPay(data, vm.id);
								break;
								// 余额支付
							case 10001:
								uni.redirectTo({
									url: '/bundle/pages/lease_pay_result/lease_pay_result' +
										'?id=' + vm.id
								});
								break;

						}
					}).catch(err => {
						this.$toast({
							title: '支付失败，请重试'
						});
						console.log(err);
					});
				}
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/xieyi?id=' + this.id
				})
			},
			// 微信支付
			payWeChat(data, orderID) {
				wxpay(data).then(res => {
					if (res == 'success') {
						uni.redirectTo({
							url: '/bundle/pages/lease_pay_result/lease_pay_result' +
								'?id=' + orderID
						});
					} else {
						return;
						uni.redirectTo({
							url: '/bundle/pages/lease_order_detail/lease_order_detail' +
								'?id=' + orderID
						});
					}
				})
			},

			// 支付宝支付
			payAliPay(data, orderID) {

				// #ifdef H5
				alipay(data);
				// #endif

				// #ifdef MP-ALIPAY
				const tradeNo = data?.data?.trade_no;
				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: tradeNo,
					success: (res) => {
						getAlipayPayStatus({
							trade_no: tradeNo
						}).then(res => {
							if (res.tradeStatus == 'TRADE_SUCCESS') {
								uni.redirectTo({
									url: '/bundle/pages/lease_pay_result/lease_pay_result' +
										'?id=' + orderID
								});
							} else {
								uni.redirectTo({
									url: '/bundle/pages/lease_order_detail/lease_order_detail' +
										'?id=' + orderID
								});
							}
						});
					},
					fail: (res) => {
						uni.redirectTo({
							url: '/bundle/pages/lease_order_detail/lease_order_detail' +
								'?id=' + orderID
						});
					}
				});
				// #endif
			}

		}
	};
</script>
<style>
	.box {
		padding: 30rpx;
	}

	.card {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		/* margin-top: 60rpx; */
	}

	.title {
		text-align: center;
		font-weight: 700;
		font-size: 38rpx;
	}

	.content {
		margin-top: 60rpx;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.item1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		gap: 60rpx;
		margin-top: 30rpx;
	}

	.info-item {
		display: flex;
		flex-direction: row;
		align-items: start;
	}

	.info-title {
		width: 180rpx;
		color: #999;
	}

	.info-desc {
		margin-left: 30rpx;
		width: 100%;
	}

	.btn {
		background-color: #24A3FF;
		padding: 30rpx 0;
		text-align: center;
		color: #fff;
		border-radius: 60rpx;
		margin-top: 120rpx;
	}
</style>